<template>
  <div class="cinema">
    <header>影院页面</header>
    <div class="list">
      <div class="list-item" v-for="item in cinemas" :key="item.cinemaId" @click="goDetail(item.cinemaId)">
        <div class="Left">
          <h4>{{ item.name }}</h4>
          <p>{{ item.address }}</p>
        </div>
        <div class="Right">
          <h4>￥{{ item.lowPrice / 100}}起</h4>
          <p>{{ item.Distance.toFixed(1) }}km</p>
        </div>
      </div>
    </div>
  </div>
</template>





<script>
import axios from 'axios';
export default {
  data() {
    return {
      cinemas:[]
    }
  },
  methods:{
    goDetail(id){
      // console.log(id)
      // 跳转详情
      this.$router.push({
        name:'cinemaDetail',
        params:{
          id
        }
      })
    },
    async getAddress() {
      const res = await axios.get('https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=6721872',{
        headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.cinema.list'
        }
      })
      // console.log(res.data.data)
      this.cinemas = res.data.data.cinemas 
    }
  },
  created() {
    this.getAddress()
  }
}
</script>




<style lang="scss" scoped>
.cinema{
  height: 100%;
  display: flex;
  flex-direction: column;
}
header{
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #CCC;
}
.list{
  flex: 1;
  overflow: auto;
}
.list-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #ccc;
}
.Left {
  flex: 1;
  overflow: hidden;
  h4{
    font-size: 14px;
    font-weight: normal;
    color: #191a1b;
  }
  p{
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
    color: #797d82;
  }
}
.Right{
  width: 60px;
  h4 {
    color: #ff5f16;
    font-weight: normal;
  }
  p {
    color: #797d82;
    margin-top: 5px;
  }

}
</style>